<template>
	<view class="index">
		<!-- 顶部导航 -->
		<view class="top-bar">
			<scroll-view 
				class="scroll-view"
				scroll-x
				:scroll-left="activeIndex  * 70 - 140"
			>
				<view v-for="(item, i) in topList" class="bar-box" @click="activeIndex = i" :id="topList[i].id">
					<view class="bar-item">
						<image :src="item.imgUrl" mode=""></image>
						<text :class="i===activeIndex? 'active-item': ''">
							{{item.name}}
						</text>
					</view>
				</view>
			</scroll-view>

			<view class="dot-box">
				<view v-for="(item, i) in topList" class="dot" :class="i===activeIndex? 'active-dot': ''"></view>
			</view>
		</view>
		<!-- 产品 -->
		<scroll-view class="content"  scroll-y :scroll-into-view="productData[activeIndex].id" style="height: 100%;">

			<view class="card" v-for="item in productData" :id="item.id" :key="item.id">
				<view class="title">
					<image :src="item.imgUrl" mode=""></image>
					{{item.name}}
				</view>
				<view class="products" :class="(item.data && item.data.length) ? 'grid' : ''">
					<template v-if="item.data && item.data.length">
						<view class="item" v-for="k in item.data" @click="toProductDetails(k)" :key="k._id">
							<image :src="bankLogoList[k.bank]" mode=""></image>
							<span>{{k.name}}</span>
						</view>
					</template>
					<view v-else style="width: 100%; text-align: center; color: #999; line-height: 60px;">
						--暂无产品--
					</view>
					
				</view>

			</view>

		</scroll-view>


		<!-- 贷款咨询 -->
		<div class="consult"  @click="consult">
			贷款咨询
		</div>
		
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
			<view class="popup-box">
				<view class="popup-title" >
					<image class="popup-avatar" src="../../static/consult/avatar.png"></image>
					<view class="popup-text" >
						<span>周主任</span>
						<span style="color: #757575;">海南政枫商务咨询服务有限公司</span>
						
					</view>
				</view>
				<view style="background-color: #fff; display: flex; justify-content: center; align-items: center; padding: 10rpx 0; " @click="callPhone">
					<span style="width: fit-content; color: #000;font-weight: 600; padding: 10rpx 0;">咨询电话：13136018388</span>
					<uni-icons style="margin-left: 10px;" type="phone"></uni-icons>
				</view>
				<view class="code-box">
					<image class="code" src="../../static/consult/wxCode.png"  show-menu-by-longpress></image>
					<view class="hint" >
						扫描二维码或长按识别
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 额度测试 -->
		<navigator class="limit"  url="../infoUpload/infoUpload">
			额度测试
		</navigator>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const zf_bankProduct = uniCloud.importObject('zf_bankProduct')

onMounted(async()=>{
	const res = await zf_bankProduct.getProduct()
	updateTopList(res.data)
})

const toProductDetails = (product) => {
	uni.navigateTo({
		url: '/pages/productDetails/productDetails' + `?product=${JSON.stringify(product)}`
	})
}

const popup = ref(null)

// 在线咨询
const consult = ()=>{
	popup.value.open()
}

const previewImage=()=> {
	uni.previewImage({
		current:'1',
		urls: ['../../static/consult/wxCode.png'],
		success: res => {
			console.log('previewImage res', res);
		},
		fail: err => {
			console.log('previewImage err', err);
		}
	});
}

const callPhone = ()=>{
	uni.makePhoneCall({
		phoneNumber: 13136018388
	})
}

const activeIndex = ref(0)

const topList = ref([{
		id: 'recp',
		name: '热门产品',
		imgUrl: '../../static/topBar/rm.png'
	},
	{
		id: 'gjjd',
		name: '公积金贷',
		imgUrl: '../../static/topBar/gjjd.png'
	},
	{
		id: 'anfd',
		name: '按揭房贷',
		imgUrl: '../../static/topBar/ajfd.png'
	},
	{
		id: 'xld',
		name: '学历贷',
		imgUrl: '../../static/topBar/xld.png'
	},
	{
		id: 'nhd',
		name: '农户贷',
		imgUrl: '../../static/topBar/nhd.png'
	},
	{
		id: 'ycd',
		name: '烟草贷',
		imgUrl: '../../static/topBar/ycd.png'
	},
	{
		id: 'shd',
		name: '商户贷',
		imgUrl: '../../static/topBar/shd.png'
	},
	{
		id: 'gxd',
		name: '工薪贷',
		imgUrl: '../../static/topBar/gxd.png'
	},
	{
		id: 'defqk',
		name: '大额分期卡',
		imgUrl: '../../static/topBar/defq.png'
	},
	{
		id: 'bdd',
		name: '保单贷',
		imgUrl: '../../static/topBar/bdd.png'
	}

]);

// 产品数据
const productData = ref([
	{
		id: 'cpRmcp',
		name: '热门产品',
		imgUrl: '../../static/topBar/rm.png'
		
	},
	{
		id: 'cpGjjd',
		name: '公积金贷',
		imgUrl: '../../static/topBar/gjjd.png'
		
	},
	{
		id: 'cp-anfd',
		name: '按揭房贷',
		imgUrl: '../../static/topBar/ajfd.png'
		
	},
	{
		id: 'cpXld',
		name: '学历贷',
		imgUrl: '../../static/topBar/xld.png'
		
	},
	{
		id: 'cpNhd',
		name: '农户贷',
		imgUrl: '../../static/topBar/nhd.png'
		
	},
	{
		id: 'cpYcd',
		name: '烟草贷',
		imgUrl: '../../static/topBar/ycd.png'
	},
	{
		id: 'cpShd',
		name: '商户贷',
		imgUrl: '../../static/topBar/shd.png'
		
	},
	{
		id: 'cpGxd',
		name: '工薪贷',
		imgUrl: '../../static/topBar/gxd.png'
		
	},
	{
		id: 'cpDefqk',
		name: '大额分期卡',
		imgUrl: '../../static/topBar/defq.png'
		
	},
	{
		id: 'cpBdd',
		name: '保单贷',
		imgUrl: '../../static/topBar/bdd.png'
		
	}

])

// 函数来更新 topList  
function updateTopList(products) {  
    products.forEach(product => {
        const item = productData.value.find(item => item.name === product.type);  
        if (item) {
            if (!Array.isArray(item.data)) {  
                item.data = [];  
            }
            item.data.push(product);  
        }  
        if (product.hot === 1) {  
            const hotItem = productData.value.find(item => item.name === '热门产品');  
            if (hotItem) {  
                if (!Array.isArray(hotItem.data)) {  
                    hotItem.data = [];  
                }
                hotItem.data.push(product);  
            }  
        }  
    })
}  

const bankLogoList = {
	'工商银行': '../../static/bank/gsyh.png',
	'建设银行': '../../static/bank/jsyh.png',
	'交通银行': '../../static/bank/jtyh.png',
	'农业银行': '../../static/bank/nyyh.png',
	'邮储银行': '../../static/bank/ycyh.png',
	'中国银行': '../../static/bank/zgyh.png',
	'中信银行': '../../static/bank/zxyh.png',
	'招商银行': '../../static/bank/zsyh.png',
	'农商银行': '../../static/bank/nsyh.png',
	'中邮消费金融': '../../static/bank/zyxfjr.png',
	'新网银行': '../../static/bank/xwyh.png',
	'其他银行': '../../static/bank/qtyh.png'
}

</script>

<style>
	page {
		background-color: #F6F6F6;
	}
</style>

<style lang="scss" scoped>
	.index {
		// #ifdef MP
		height: calc(100vh - 88rpx);
		// #endif
		// #ifndef MP
		height: calc(100vh - 358rpx);
		// #endif
		display: flex;
		flex-direction: column;
	}

	.top-bar {
		background-color: #fff;
		padding: 20rpx;
		position: sticky;
		top:var(--window-top);
		background-color: #fff;
		z-index: 9;
		.scroll-view {
			white-space: nowrap;
			width: 100vw;

			.bar-box {
				width: fit-content;
				display: inline-block;

				.bar-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 12px;
					width: 140rpx;

					image {
						margin-bottom: 6rpx;
						width: 60rpx;
						height: 60rpx;
					}
				}

				.active-item {
					color: #4b86bc;
				}
			}

		}

		.dot-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10px;

			.dot {
				width: 10rpx;
				height: 10rpx;
				background-color: #5393cf;
				border-radius: 50%;
				margin-left: 10rpx;
			}

			.active-dot {
				width: 30rpx;
			}
		}
	}


	.content {
		flex: 1;
		// padding: 20rpx;
		// box-sizing: border-box;
		.card {
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			margin: 10rpx 20rpx 20rpx;
			box-shadow: 0 0 20rpx 1rpx #e7e7e7;
			padding: 20rpx 0;
			.title {
				display: flex;
				align-items: center;
				padding-bottom: 10rpx;
				margin: 0 20rpx 10rpx;
				border-bottom: 2rpx solid #dcdcdc;
				font-weight: 500;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}
			}

			.products {
				padding: 0 20rpx;
				min-height: 60px;
				.item {
					width: 140rpx;
					font-size: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10rpx;
					background-color: #fff;
					box-shadow: 0 0 20rpx 1rpx #f1f1f1;
					border-radius: 30%;
					image {
						width: 90rpx;
						height: 90rpx;
					}
				}
			}
			.grid{
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(140rpx, 1fr));  
				
			}
		}
	}
	.consult{
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 26rpx;
		box-sizing: border-box;
		color: #fffbf3;
		background-color: rgba(#2c5990, .8);
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		box-shadow: 0 0 20rpx 2rpx #b0b0b0;
		position: fixed;
		top: 300rpx;
		right: 20rpx;
	}

	.limit{
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 26rpx;
		box-sizing: border-box;
		color: #fffbf3;
		background-color: rgba(#4f9eff, .8);
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		box-shadow: 0 0 20rpx 2rpx #b0b0b0;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
	}
	
	.popup-box{
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 20rpx;
		.popup-title{
			display: flex;
			align-items: center;
			background-image:linear-gradient(120deg,#84fab0 0%, #8fd3f4 100%);
			padding:30rpx 20rpx;
			.popup-avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.popup-text{
				display: flex;
				flex-direction: column;
			}
		}
		.code-box{
			padding: 20rpx;
			padding-top: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.code{
				width: 300rpx;
				height: 300rpx;
			}
			.hint{
				margin-top: 10rpx;
				color: #999;
			}
		}
		
	}
	
</style>